<template>
	<view>
		<!-- <view class="tab-title">
			<u-tabs :list="list" :is-scroll="false" bar-width="300" bar-height="4" active-color="#333" inactive-color="#555" :current="current" @change="change"></u-tabs>
		</view> -->
		
		<view class="list">
			<view class="item u-flex" v-for="item in addList" :key="item.id" @click="choose(item)">
				<view class="info u-flex-1">
					<view class="u-flex">
						<view class="name">{{item.realname}}</view>
						<view class="phone">{{item.phone}}</view>
					</view>
					<view class="id-code">{{`${item.province} ${item.city} ${item.county} ${item.address}`}}</view>
				</view>
				<view class="edit" @click.stop="jump(`/pages/address/edit?type=edit&id=${item.id}`)">
					<u-icon name="edit-pen-fill" color="#333" size="32"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- 底部安全区适配 -->
		<view class="safe-area-inset-bottom"></view>
		<view class="add-mc u-flex safe-area-inset-bottom">
			<view @click="jump(`/pages/address/edit?type=add`)"><u-icon name="plus" class="#fff" size="30"></u-icon><text>添加收货地址</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '默认地址'
				}, {
					name: '伴侣地址'
				}],
				current: 0,
				addList:[],
				isChoose:!1
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			getList(){
				this.$u.api.address().then(res=>{
					this.addList = res
				})
			},
			choose(item){
				if(this.isChoose){
					uni.$emit('addressChooseItem',item)
					this.$app.back()
				}
			}
		},
		onShow() {
			this.getList()
		},
		onLoad(o) {
			if(o.type == 'choose'){
				this.isChoose = !0
			}
		}
	}
</script>

<style lang="scss">
	page{background-color: #f5f5f5;}
	.list{
		padding: 0 30rpx 120rpx;
		.item{
			padding: 30rpx;font-size: 30rpx;margin-top: 20rpx;background-color: #fff;border-radius: 14rpx;
			.info{
				word-break: break-all;color: #111;
				.name{font-weight: bold;padding-right: 18rpx;}
				.phone{color: #666;}
				.id-code{font-size: 28rpx;font-weight: normal;margin-top: 14rpx;}
			}
			.edit{padding: 20rpx 10rpx 20rpx 20rpx;}
		}
	}
	.tab-title{
		position: sticky;top: 0;background-color: #fff;z-index: 9;
	}
	.add-mc{
		position: fixed;width: 100%;height: 100rpx;justify-content: center;z-index: 9;left: 0;bottom: 0;box-sizing: content-box;
		&>view{background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);color: #fff;font-size: 30rpx;text-align: center;width: 100%;margin: 0 30rpx;border-radius: 100rpx;height: 70rpx;line-height: 70rpx;}
		&>view>text{margin-left: 10rpx;}
	}
</style>
